<template>
  <section class="common">
    <p class="common-title">出入管理案例</p>
    <ul>
      <li>
        <img class="img" src="@/assets/images/case/comeOut/Frame-353.jpg" />
        <div>
          <p class="title marginBottom">出入管理</p>
          <p>艾瑞斯的虹膜识别设备最多能储存50000人,</p>
          <p>在各种项目中被广泛使用。</p>
        </div>
      </li>
    </ul>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img class="img" :src="item.img" />
        <p class="name">{{item.name}}</p>
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
//定义ts 接口类型
interface editFormDataType {
  name: string
  img: string
}
// 获取本地图片
const getImage = (name: string) => {
  return new URL(`../../../assets/images/case/comeOut/${name}`, import.meta.url)
    .href
}
let list: editFormDataType[] = reactive([])
list.push(
  ...[
    {
      img: getImage('222-1.jpg'),
      name: '现代汽车研发中心',
    },
    {
      img: getImage('image116.png'),
      name: '企划财政部服务器安全中心 最终级别为3级',
    },
    {
      img: getImage('image118.png'),
      name: '韩国电力综合管控',
    },
    {
      img: getImage('image119.png'),
      name: '韩国南方发电',
    },
    {
      img: getImage('image-130.jpg'),
      name: '韩国电力公司总部',
    },
    {
      img: getImage('image-117.jpg'),
      name: 'KT电源管理',
    },
    {
      img: getImage('image123.png'),
      name: '企划财政部网络安全中心',
    },
    {
      img: getImage('image124.png'),
      name: '韩国电力公司总部',
    },
    {
      img: getImage('image-125.jpg'),
      name: '保健福利部电算室',
    },
    {
      img: getImage('image-126.jpg'),
      name: 'MBC电视剧《怪物》赞助商',
    },
    {
      img: getImage('image-128.jpg'),
      name: 'MBC电视剧《怪物》赞助商',
    },
    {
      img: getImage('image-129.jpg'),
      name: 'KT九老&惠化分公司',
    },
  ]
)
</script>

<style lang="scss" scoped>
@import './common.scss';
.common {
  .marginBottom {
    margin-bottom: 20px !important;
  }
  ul {
    li {
      margin-bottom: 20px;
      .name {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 82px;
        background-color: #daeeff;
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
      }
    }
  }
}
</style>